<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授权与分享演示</title>
    <!-- Bootstrap Core CSS -->
    <link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="__CDN__/assets/css/index.css" rel="stylesheet">
</head>

<body id="page-top">

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">授权与分享演示</a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-menu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{:url('/')}" target="_blank">{:__('Home')}</a></li>
                <li><a href="{:url('index/user/index')}" target="_blank">{:__('会员中心')}</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="header-content">
                    <div class="header-content-inner" style="padding-top:6rem">
                        <b>温馨提示：</b><br/>
                        当前页面的授权和分享功能仅提供给开发者参考，不建议在生产环境直接使用。<br/><br/>
                        <b>分享功能踩坑：</b><br/>
                        如果您发现分享设置后无效，分享出去任然是一个纯链接，请尝试扫码或从公众号菜单进入页面再分享，不能直接从微信中点击链接打开本页面，具体原因不明。
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>

<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- 微信JSSDK授权 -->
<!-- 微信分享接口文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#12 -->
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js" charset="utf-8" async="async"></script>
<script>
    window.onload = function () {
        var currentUrl = '{$currentUrl}';//这里需要注意最好是通过后端渲染，避免出现失败

        wx.config({
            debug: false,
            appId: '{$wxConfig.appId}',
            timestamp: '{$wxConfig.timestamp}',
            nonceStr: '{$wxConfig.nonceStr}',
            signature: '{$wxConfig.signature}',
            jsApiList: {$wxConfig.jsApiList}
        });

        wx.ready(function(){
            wx.checkJsApi({
                jsApiList: {$wxConfig.jsApiList}, // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    // console.log(res.checkResult)

                    if (res.checkResult.updateAppMessageShareData == true) {
                        //分享给朋友
                        wx.updateAppMessageShareData({
                            title: '{$wxConfig.share_title}',   // 分享标题
                            desc: '{$wxConfig.share_synopsis}', // 分享描述
                            link: currentUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: '{:cdnurl($wxConfig.share_img, true)}', // 分享图标
                            success: function () {
                                console.log('设置成功', {
                                    title: '{$wxConfig.share_title}',   // 分享标题
                                    desc: '{$wxConfig.share_synopsis}', // 分享描述
                                    link: currentUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: '{:cdnurl($wxConfig.share_img, true)}', // 分享图标
                                })
                            },
                            fail: function () {
                                console.log('接口调用失败时执行的回调函数')
                            },
                            complete: function() {
                                console.log('接口调用完成时执行的回调函数，无论成功或失败都会执行')
                            }
                        });
                    }

                    if (res.checkResult.updateTimelineShareData == true) {
                        //分享到朋友圈
                        wx.updateTimelineShareData({
                            title: '{$wxConfig.share_title}',       // 分享标题
                            link: currentUrl,                       // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: '{:cdnurl($wxConfig.share_img, true)}', // 分享图标
                            success: function () {
                                console.log('设置成功',{
                                    title: '{$wxConfig.share_title}',   // 分享标题
                                    desc: '{$wxConfig.share_synopsis}', // 分享描述
                                    link: currentUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: '{:cdnurl($wxConfig.share_img, true)}', // 分享图标
                                })
                            },
                            fail: function () {
                                console.log('接口调用失败时执行的回调函数')
                            },
                            complete: function() {
                                console.log('接口调用完成时执行的回调函数，无论成功或失败都会执行')
                            }
                        });
                    }
                }
            });
        });

        // 失败
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            alert(JSON.stringify(res));
        });
    }
</script>
</body>
</html>